<template>
  <div class="want-to-chat">
    <nav>
      <div @click="backFunc" class="back">&lt;</div>
    </nav>
    <main>
      <div class="main-top">
        <div class="list">
          <div class="img">
            <img :src="imgUrl" alt="img" />
          </div>
          <div class="desc">
            <span class="nickname">昵称：{{ basicNic }}</span>
            <span
              >微信号：<span class="phone">{{ phone }}</span></span
            >
            <span>地区：广东 广州</span>
          </div>
        </div>
        <div class="list">
          <span>电话号码：{{ phone }}</span>
        </div>
        <div class="list between">
          <span>设置备注和标签</span>
          <span>&gt;</span>
        </div>
        <div class="list between">
          <span>朋友圈权限</span>
          <span>&gt;</span>
        </div>
      </div>
      <div class="main-center">
        <div class="list between">
          <span>朋友圈</span>
          <span>&gt;</span>
        </div>
        <div class="list between">
          <span>更多信息</span>
          <span>&gt;</span>
        </div>
      </div>
      <div class="main-bottom">
        <div class="bottom-item" @click="goToChatDesView">
          <van-icon name="chat-o" /> 发消息
        </div>
        <div class="bottom-item"><van-icon name="video-o" /> 音频视频通话</div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      basicNic: "",
      imgUrl: "",
    };
  },
  created() {
    console.log( JSON.parse(this.$route.params.list));
    this.imgUrl = this.avatarurl || require("@/assets/image/addressImg/head.webp");
    this.basicNic = this.nickname || `用户${this.phone}`;
  },
  computed: {
    nickname() {
      return JSON.parse(this.$route.params.list).nickname;
    },
    phone() {
      return JSON.parse(this.$route.params.list).phone;
    },
    avatarurl() {
      return JSON.parse(this.$route.params.list).avatarurl;
    },
  },
  methods: {
    goToChatDesView() {
      this.$router.push({
        name: "chatdes",
      });
    },
    backFunc() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.want-to-chat {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: rgb(17, 17, 17);
  color: white;

  nav {
    width: 100vw;
    height: 45px;
    background-color: rgb(17, 17, 17);
    line-height: 45px;
    color: white;
    text-align: left;
    font-size: 14px;
    padding-left: 15px;
  }

  .main-top {
    margin-bottom: 15px;

    .img {
      width: 60px;
      height: 60px;
      border-radius: 5px;
      margin-right: 20px;

      img {
        width: 100%;
        height: 100%;
        display: block;
         border-radius: 5px;
      }
    }

    .desc {
      display: flex;
      flex-direction: column;
      line-height: 25px;
      color: gray;
      margin-bottom: 15px;

      .nickname {
        font-size: 16px;
        font-weight: bold;
        color: white;
      }
    }
  }

  .main-center {
    margin-bottom: 15px;
  }

  .phone {
    color: rgb(160, 196, 247);
  }

  .main-bottom {
    text-align: center;
    line-height: 40px;

    .bottom-item {
      background-color: rgb(24, 24, 24);
      color: rgb(160, 196, 247);
      border: 1px solid rgba(204, 203, 203, 0.1);
    }
  }

  .list {
    line-height: 25px;
    display: flex;
    flex-direction: row;
    padding: 15px;
    border-bottom: 1px solid rgba(204, 203, 203, 0.1);
    background-color: rgb(24, 24, 24);

    &.between {
      justify-content: space-between;
    }
  }
}
</style>